

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/boshi.jpeg">
  <link rel="icon" type="image/png" href="/img/boshi.jpeg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="wangpf">
  <meta name="keywords" content="">
  <title>TypeScript学习总结之基础类型 - wpf的博客</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/foundation.min.css" />
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_6peoq002giu.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.1.1"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Wangpf's blog</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/img/article.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container page-header text-center fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              
  <div class="mt-3 post-meta">
    <i class="iconfont icon-date-fill" aria-hidden="true"></i>
    <time datetime="2020-12-26 15:21" pubdate>
      2020年12月26日 下午
    </time>
  </div>


<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      1.6k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      20
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto" id="post">
            <!-- SEO header -->
            <h1 style="display: none">TypeScript学习总结之基础类型</h1>
            
            <div class="markdown-body" id="post-body">
              <p>​<br><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/408cfbc308734bd8bcbb8a36c40135d0~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt="TypeScript"></p>
<h2 id="对TypeScript-的认识"><a href="#对TypeScript-的认识" class="headerlink" title="对TypeScript 的认识"></a>对TypeScript 的认识</h2><p>TypeScript  是什么？</p>
<ol>
<li><p>TypeScript  是 JavaScript类型的超集，它可以编译纯JavaScript  ， 是由 微软开发的开源的编程语言。</p>
</li>
<li><p>TypeScript  可以在任何浏览器，任何计算机和任何操作系统上运行。</p>
</li>
<li><p>TypeScript  是开发大型应用的基石。</p>
</li>
<li><p>TypeScript   提供了更丰富的语法提示，  在编写阶段能够检查错误。</p>
</li>
</ol>
<p>  <strong>与JavaScript的区别</strong></p>
<p>TypeScript   是静态类型， JavaScript是动态类型</p>
<ol>
<li>在TypeScript   中 类型是确定好的。（一旦给类型赋值后就不能更改其类型）</li>
</ol>
<h3 id="TypeScript-数据类型"><a href="#TypeScript-数据类型" class="headerlink" title="TypeScript 数据类型"></a>TypeScript 数据类型</h3><blockquote>
<p>为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。</p>
</blockquote>
<h4 id="JavaScript-的基本数据类型："><a href="#JavaScript-的基本数据类型：" class="headerlink" title="JavaScript 的基本数据类型："></a>JavaScript 的基本数据类型：</h4><p>原始数据类型：string、number、boolean、null、undefined、symbol</p>
<p>引用数据类型：object</p>
<p>TypeScript 的基本数据类型：</p>
<p>包含JavaScript所有的基本数据之外，额外新增了几种新的数据类型（大概的写一下）：</p>
<ol>
<li>any(任意类型)、</li>
<li>never （<code>never</code>类型表示的是那些永不存在的值的类型） 、 </li>
<li>void（<code>void</code>类型像是与<code>any</code>类型相反、只能为它赋予<code>undefined</code>和<code>null</code>）</li>
<li>针对于对象类型的： interface</li>
<li>针对于数组的：number[] 、string[] 、boolean[] 等， 泛型的写法：Array&lt;元素类型&gt; (Array<number>) </li>
<li>函数的注解</li>
</ol>
<h4 id="TypeScript-原始数据的注解"><a href="#TypeScript-原始数据的注解" class="headerlink" title="TypeScript 原始数据的注解"></a>TypeScript 原始数据的注解</h4><h5 id="布尔值的注解-："><a href="#布尔值的注解-：" class="headerlink" title="布尔值的注解  ："></a>布尔值的注解  ：</h5><div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> isDone: <span class="hljs-built_in">boolean</span> = <span class="hljs-literal">false</span>;</code></pre></div>
<p>//注意boolean 首字母不能大写，</p>
<p>注解：Boolean 指的是如下：<br><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12c8d64a47724d5ca52e85bcaaae69b2~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt="Boolean"></p>
<h5 id="数字的注解："><a href="#数字的注解：" class="headerlink" title="数字的注解："></a>数字的注解：</h5><div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> decLiteral: <span class="hljs-built_in">number</span> = <span class="hljs-number">6</span>;</code></pre></div>

<h5 id="字符串的注解："><a href="#字符串的注解：" class="headerlink" title="字符串的注解："></a>字符串的注解：</h5><div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> myName: <span class="hljs-built_in">string</span> = <span class="hljs-string">&quot;bob&quot;</span>;
myName = <span class="hljs-string">&quot;smith&quot;</span>;
<span class="hljs-keyword">let</span> sentence: <span class="hljs-built_in">string</span> = <span class="hljs-string">`Hello, my name is <span class="hljs-subst">$&#123; myName &#125;</span>.</span></code></pre></div>

<p>// 注意这点不能用 name来命名</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/167bcf4d02ac47d0ad6f0066a8432024~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt="不能name来命名"></p>
<h5 id="any-数据类型：-任意数据类型；"><a href="#any-数据类型：-任意数据类型；" class="headerlink" title="any 数据类型： 任意数据类型；"></a>any 数据类型： 任意数据类型；</h5><ol>
<li><p><strong>如果是不同变量的话，可以是任意的数据类型</strong></p>
<div class="hljs"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> notSure: <span class="hljs-built_in">any</span> = <span class="hljs-number">4</span>;
notSure = <span class="hljs-string">&quot;maybe a string instead&quot;</span>;
notSure = <span class="hljs-literal">false</span>; <span class="hljs-comment">// okay, definitely a boolean</span></code></pre></div>
</li>
<li><p><strong>如果是对象的话， any 是不能够提示原型上的共有属性和方法的。</strong></p>
 <div class="hljs"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> notSure: <span class="hljs-built_in">any</span> = <span class="hljs-number">4</span>;
notSure.ifItExists(); <span class="hljs-comment">// okay, ifItExists might exist at runtime</span>
notSure.toFixed(); <span class="hljs-comment">// okay, toFixed exists (but the compiler doesn&#x27;t check)</span></code></pre></div>

<p> 相反，如果是 Object的话，它就会提示使用Object类型上的属性</p>
 <div class="hljs"><pre><code class="hljs typescript"><span class="hljs-keyword">let</span> prettySure: <span class="hljs-built_in">Object</span> = <span class="hljs-number">4</span>;
prettySure.toFixed(); <span class="hljs-comment">// Error: Property &#x27;toFixed&#x27; doesn&#x27;t exist on type &#x27;Object&#x27;.</span>
prettySure.toString()  <span class="hljs-comment">// OK</span></code></pre></div>

<p> 如下图<br> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84e70431681d4d4b94cd4e3a2ca04ee7~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif"></p>
</li>
</ol>
<ol start="3">
<li><strong>未给初始值的变量类型 为 any 类型</strong> <div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> a
a = <span class="hljs-string">&#x27;123&#x27;</span>
a = <span class="hljs-number">123</span></code></pre></div>
  <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f571820298be45b88dffb6c0602f0e86~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt=" any 类型"></li>
</ol>
<h5 id="void"><a href="#void" class="headerlink" title="void"></a>void</h5><blockquote>
<p> void<code>类型像是与</code>any<code>类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 </code>void</p>
</blockquote>
<div class="hljs"><pre><code class="hljs typescript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">warnUser</span>(<span class="hljs-params"></span>): <span class="hljs-title">void</span> </span>&#123;
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;This is my warning message&quot;</span>);
  <span class="hljs-comment">//相当于 return undefined  </span>
&#125;</code></pre></div>

<h5 id="null-amp-undefined"><a href="#null-amp-undefined" class="headerlink" title="null &amp; undefined"></a>null &amp; undefined</h5><blockquote>
<p> 默认情况下null和undefined是所有类型的子类型</p>
</blockquote>
<p>在tsconfig.json 中配置 strictNullChecks = false 时，<br>就可证明null和undefined是所有类型的子类型 </p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> u: <span class="hljs-built_in">number</span> = <span class="hljs-literal">undefined</span>;  <span class="hljs-comment">// strictNullChecks = false 时， 不报错</span></code></pre></div>
<blockquote>
<p>但官方建议让我们 strictNullChecks = true ，但在配置中这个标记是关闭的。</p>
</blockquote>
<h5 id="Never"><a href="#Never" class="headerlink" title="Never"></a>Never</h5><p> <code>never</code>类型表示的是那些永不存在的值的类型, 例如， <code>never</code>类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 <code>never</code>类型，当它们被永不为真的类型保护所约束时。</p>
<p> （目前我接触的这种实际情景不多，以后遇到了我再去单独了解）</p>
<h5 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h5><p> object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。</p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">declare</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">o: <span class="hljs-built_in">object</span> | <span class="hljs-literal">null</span></span>): <span class="hljs-title">void</span></span>;

create(&#123; prop: <span class="hljs-number">0</span> &#125;); <span class="hljs-comment">// OK</span>
create(<span class="hljs-literal">null</span>); <span class="hljs-comment">// OK</span>

create(<span class="hljs-number">42</span>); <span class="hljs-comment">// Error</span>
create(<span class="hljs-string">&quot;string&quot;</span>); <span class="hljs-comment">// Error</span>
create(<span class="hljs-literal">false</span>); <span class="hljs-comment">// Error</span>
create(<span class="hljs-literal">undefined</span>); <span class="hljs-comment">// Error</span></code></pre></div>
<p>以上是官网的例子， 上面代码说明了 object 不能是去使用 原始类型 ， 比如<code>create(function()&#123;&#125;)</code>、 <code>create([])</code> 这些是可以OK的。</p>
<h3 id="类型注解-amp-类型推论-amp-联合类型"><a href="#类型注解-amp-类型推论-amp-联合类型" class="headerlink" title="类型注解 &amp; 类型推论 &amp; 联合类型"></a>类型注解 &amp; 类型推论 &amp; 联合类型</h3><p>在我们定义变量时，而这个变量是原始数据，那么，我们不需要对它进行类型注解，它也能推论出该变量属于什么类型的。  </p>
<p>如下图： 类型推论</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39eec58dbd7a44658964fc4fb0ceec41~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt="类型推论"></p>
<p><strong>所以正常情况下，能够做出类型推论的话，我们专门去对它注解，会显得有些繁琐了。</strong></p>
<p>但是肯定有别的情况需要我们去做类型注解，</p>
<p>比如：当我们定义一个方式， 它会提示我们去进行类型注解</p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params">a, b</span>) </span>&#123;  <span class="hljs-comment">// 在编辑器中会提示你要做类型注解</span>
  <span class="hljs-keyword">return</span> a + b
&#125;
 
test(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>)</code></pre></div>

<p>做类型注解：</p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params">a:<span class="hljs-built_in">number</span>, b:<span class="hljs-built_in">number</span></span>) </span>&#123;
  <span class="hljs-keyword">return</span> a + b
&#125;
 
test(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>)</code></pre></div>

<p><strong>联合类型：</strong>  多个类型当中，我们可以选择其中类型的一种</p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> union: <span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span>
union= <span class="hljs-string">&#x27;123&#x27;</span>  <span class="hljs-comment">// is OK</span>
union= <span class="hljs-number">123</span>    <span class="hljs-comment">// is OK</span></code></pre></div>

<p>而当我们去定义一个函数时：</p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params">a: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span></span>) </span>&#123;
  <span class="hljs-keyword">return</span> a.toString()   <span class="hljs-comment">// 共有属性， OK</span>
  <span class="hljs-comment">//  return  a.split()  // 这个是 String 独有的属性，不能联合起来使用</span>
&#125;

test(<span class="hljs-number">1</span>)</code></pre></div>


<p>因此，我们要注意，</p>
<ol>
<li><p>联合类型的共有属性不会报错， </p>
<p>但不要用 联合类型中其中一种类型的独有属性 比如 String 中的 split 方法， Number是没有此属性的， 因此会报错   </p>
</li>
<li><p>在赋值的时候要确认类型</p>
</li>
</ol>
<h3 id="初识-interface"><a href="#初识-interface" class="headerlink" title="初识 interface"></a>初识 interface</h3><blockquote>
<p>接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。</p>
</blockquote>
<ol>
<li>对对象的形状进行描述；</li>
<li>对类的一部分行为的抽象；</li>
</ol>
<p>简单使用：(对 对象的形状进行描述)</p>
<p><strong>// interface默认不能多属性也不能少属性</strong></p>
<div class="hljs"><pre><code class="hljs ts">
<span class="hljs-keyword">interface</span> Person &#123;
  name: <span class="hljs-built_in">string</span>
  age: <span class="hljs-built_in">number</span>
&#125;

<span class="hljs-keyword">let</span> preson: Person = &#123;
  name: <span class="hljs-string">&#x27;wpf&#x27;</span>,
  age: <span class="hljs-number">18</span>
&#125;</code></pre></div>

<ul>
<li><strong>可选属性：如果偏偏少属性呢？  就在属性后边加<code>?</code>即可。 如果想多属性呢，</strong></li>
<li><strong>任意/多选 属性<code>[propName:string]:any</code></strong></li>
<li><strong>只读属性: <code>readonly</code>后面加属性</strong><div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">interface</span> Person &#123; 
  <span class="hljs-keyword">readonly</span> id: <span class="hljs-built_in">number</span>,    <span class="hljs-comment">// 只读属性</span>
  name: <span class="hljs-built_in">string</span>
  age?: <span class="hljs-built_in">number</span>  <span class="hljs-comment">// 可选属性</span>
  [propName:<span class="hljs-built_in">string</span>]:<span class="hljs-built_in">any</span>   <span class="hljs-comment">// 任意属性</span>
&#125;

<span class="hljs-keyword">let</span> preson: Person = &#123;
  id: <span class="hljs-number">1</span>,
  name: <span class="hljs-string">&#x27;wpf&#x27;</span>,
  male: <span class="hljs-string">&#x27;男&#x27;</span>
&#125;</code></pre></div>


</li>
</ul>
<h3 id="数组注解"><a href="#数组注解" class="headerlink" title="数组注解"></a>数组注解</h3><p>定义数组的方式有三种：</p>
<ol>
<li>类型[]   如： number[] </li>
<li>数组泛型  Array&lt;类型&gt;  如： Array<number></li>
<li>interface 方式</li>
</ol>
<p><strong>类型[]</strong></p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> list: <span class="hljs-built_in">number</span>[] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];  <span class="hljs-comment">// 默认不写，会类型推论 推出来</span>
<span class="hljs-keyword">let</span> list1: (<span class="hljs-built_in">string</span> | <span class="hljs-built_in">number</span>)[] = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-string">&#x27;1&#x27;</span>]  <span class="hljs-comment">// 联合类型</span></code></pre></div>

<p><strong>Array&lt;类型&gt;</strong></p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">let</span> list: <span class="hljs-built_in">Array</span>&lt;<span class="hljs-built_in">number</span>&gt; = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];</code></pre></div>

<p><strong>interface 方式</strong></p>
<div class="hljs"><pre><code class="hljs ts"><span class="hljs-keyword">interface</span> List &#123;
  [index: <span class="hljs-built_in">number</span>]: <span class="hljs-built_in">number</span>
&#125;
<span class="hljs-keyword">let</span> list: List = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]</code></pre></div>

<div class="hljs"><pre><code class="hljs ts"><span class="hljs-comment">// 联合类型</span>
<span class="hljs-keyword">interface</span> List &#123;
  [index: <span class="hljs-built_in">number</span>]: <span class="hljs-built_in">number</span> | <span class="hljs-built_in">string</span>
&#125;

<span class="hljs-keyword">let</span> list: List = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-string">&#x27;6&#x27;</span>]</code></pre></div>

<p><strong>类数组</strong></p>
<p>// args 就是个类数组</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd2eaf920d594d9f8cadcb5b680bf873~tplv-k3u1fbpfcp-watermark.image" srcset="/img/loading.gif" alt="类数组"></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                <div class="post-meta mr-3">
                  <i class="iconfont icon-category"></i>
                  
                  <a class="hover-with-bg" href="/categories/typescript/">typescript</a>
                  
                  <a class="hover-with-bg" href="/categories/typescript/JavaScript/">JavaScript</a>
                  
                </div>
                
                
                <div class="post-meta">
                  <i class="iconfont icon-tags"></i>
                  
                  <a class="hover-with-bg" href="/tags/typescript/">typescript</a>
                  
                </div>
                
              </div>
              
              
              <div class="post-prevnext row">
                <article class="post-prev col-6">
                  
                  
                  <a href="/2020/12/27/40.TypeScript%E7%B3%BB%E5%88%972/">
                    <i class="iconfont icon-arrowleft"></i>
                    <span class="hidden-mobile">TypeScript学习总结之函数</span>
                    <span class="visible-mobile">上一篇</span>
                  </a>
                  
                </article>
                <article class="post-next col-6">
                  
                  
                  <a href="/2020/12/21/38.nodejs%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81/">
                    <span class="hidden-mobile">node.js中使用nodemailer插件发送邮件 (学习总结)</span>
                    <span class="visible-mobile">下一篇</span>
                    <i class="iconfont icon-arrowright"></i>
                  </a>
                  
                </article>
              </div>
              
            </div>

            
            <!-- Comments -->
            <article class="comments" id="comments">
              
              
  <div id="vcomments"></div>
  <script type="text/javascript">
    function loadValine() {
      addScript('https://cdn.staticfile.org/valine/1.4.14/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "hjxsDRXYScicliqD8I8JqoTu-gzGzoHsz",
          app_key: "qUcAEReEqeEVp5wwXJ41uCCp",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: true,
          recordIP: false,
          serverURLs: "",
        });
      });
    }
    waitElementVisible('vcomments', loadValine);
  </script>
  <noscript>Please enable JavaScript to view the <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments
      powered by Valine.</a></noscript>


            </article>
            
          </article>
        </div>
      </div>
    </div>
    
    <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
      <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

    </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/main.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '#post-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "TypeScript学习总结之基础类型&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "always",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>







  
  
    <script>
      !function (e, t, a) {
        function r() {
          for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
          requestAnimationFrame(r)
        }

        function n() {
          var t = "function" == typeof e.onclick && e.onclick;
          e.onclick = function (e) {
            t && t(), o(e)
          }
        }

        function o(e) {
          var a = t.createElement("div");
          a.className = "heart", s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
          }), t.body.appendChild(a)
        }

        function i(e) {
          var a = t.createElement("style");
          a.type = "text/css";
          try {
            a.appendChild(t.createTextNode(e))
          } catch (t) {
            a.styleSheet.cssText = e
          }
          t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
          return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }

        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
          setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
    </script>
  











  

  

  

  

  

  





</body>
</html>
